<template>
<div class="app-container">
  <div class="app-container_conter">
  <div style="display: flex;justify-content: space-between">
    <el-form style="display: flex;justify-content: space-between;align-items:flex-end "  ref="queryParams" :model="queryParams" :rules="rules1" label-width="120px" >
      <div style="display: flex;flex-flow: wrap">
      <el-form-item label="保单号" prop="insureId" style="margin-bottom: 20px">
        <el-select v-model="queryParams.insureId" :filterable="true" :reserve-keyword="true" style="width:280px"  :filter-method="search"
                     placeholder="请选择/搜索保单号"  v-loadmore="loadMore">
          <el-option
            v-for="item in insure"
            :key="item.id"
            :label="item.insure_no"
            :value="item.id" @click.native="getSelect(item)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idCardNo" style="margin-bottom: 20px">
        <el-select v-model="queryParams.idCardNo" :filterable="true" :reserve-keyword="true" :filter-method="search1" v-loadmore="loadMore1" placeholder="请选择">
          <el-option
            v-for="item in userList1"
            :key="item.id"
            :label="item.id_card_no"
            :value="item.id_card_no" >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="被保险人" prop="name2" style="margin-bottom: 20px">
          <el-select v-model="queryParams.userId"  placeholder="请选择被保险人" >
            <el-option
                v-for="item in insured"
                :key="item.user_id"
                :label="item.user_name"
                :value="item.user_id"
            >
            </el-option>
          </el-select>
<!--        <el-input v-model="queryParams.name2" placeholder="请输入被保险人"></el-input>-->
      </el-form-item>
      <el-form-item label="用工单位" prop="company" style="margin-bottom: 20px">
        <el-input v-model="queryParams.company" placeholder="请输入用工单位"></el-input>
      </el-form-item>
      <el-form-item label="保险时间" prop="insuranceTime" style="margin-bottom: 20px">
        <el-date-picker
            v-model="queryParams.insuranceTime"
            type="month"
            placeholder="选择月"
            value-format="yyyy-MM"
           >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报案日期" prop="createTime" style="margin-bottom: 20px">
        <el-date-picker
            v-model="queryParams.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      </div>
      <div style="width: 200px;display: flex;margin-bottom: 20px" >
        <el-button style="margin-left: 10px;height:35px;" type="primary" size="mini" @click="getSearch('queryParams')">搜索</el-button>
        <el-button style="margin-left: 10px;height: 35px;" type="info" size="mini"  @click="getReset('queryParams')">重置</el-button>
      </div>
    </el-form>
  </div>
  <el-table  v-loading="loading" :data="userList" @selection-change="handleSelectionChange"  :header-cell-style="tableHeaderColor">
    <el-table-column type="selection" width="55" align="center"/>
    <el-table-column label="保单号" align="center" prop="insureEli.insure_no" min-width="180px"/>
    <el-table-column label="被保险人" align="center" prop="user_name" min-width="130px"/>
<!--    <el-table-column label="员工姓名" align="center" prop="insureEli.name2"/>-->
    <el-table-column label="雇员姓名" align="center" prop="name" min-width="120px"/>
    <!--      <el-table-column label="用户性别" align="center" prop="sex" :formatter="sexFormat" />-->
    <el-table-column label="证件名称" align="center" prop="id_card_type_name" min-width="120px"/>
    <el-table-column label="证件号码" align="center" prop="id_card_no" min-width="180px"/>
    <el-table-column label="工种类别" align="center" prop="type" :formatter="typeFormat" min-width="110px" />
    <!--      <el-table-column label="健康情况" align="center" prop="healthCond"/>-->
<!--    <el-table-column label="月收入" align="center" prop="income_month" min-width="100px">-->
<!--      <template slot-scope="scope">-->
<!--        <el-button-->
<!--            style="color: #666666"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            v-hasPermi="['insurance:OnlineReporting:countPrice']"-->
<!--        >-->
<!--          {{scope.row.income_month}}-->
<!--        </el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column label="用工单位" align="center" prop="company" min-width="180px"/>
    <el-table-column label="职务名称" align="center" prop="industry_name" min-width="150px"/>
<!--    <el-table-column label="保费" align="center" prop="price" min-width="100px">-->
<!--      <template slot-scope="scope">-->
<!--        <span v-hasPermi="['insurance:OnlineReporting:countPrice']">-->
<!--           {{scope.row.price}}-->
<!--        </span>-->
<!--&lt;!&ndash;        <el-button&ndash;&gt;-->
<!--&lt;!&ndash;            style="color: #666666"&ndash;&gt;-->
<!--&lt;!&ndash;            size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;            type="text"&ndash;&gt;-->
<!--&lt;!&ndash;            v-hasPermi="['insurance:OnlineReporting:countPrice']"&ndash;&gt;-->
<!--&lt;!&ndash;        >&ndash;&gt;-->
<!--&lt;!&ndash;          {{scope.row.price}}&ndash;&gt;-->
<!--&lt;!&ndash;        </el-button>&ndash;&gt;-->

<!--      </template>-->

<!--    </el-table-column>-->
    <el-table-column label="保险截止" align="center" prop="insureEli.insurance_time_end" min-width="150px"/>
<!--    :formatter="statusFormat"-->
    <el-table-column label="状态 " align="center" prop="isRecord" min-width="100px"/>
    <el-table-column label="操作" align="center"  min-width="180px" class-name="small-padding fixed-width">
      <template slot-scope="scope">

        <el-button
          v-show="scope.row.isRecord=='未报案'"
          size="mini"
          type="text"
          v-hasPermi="['insurance:repordRecord:add']"
          @click="handlePolice(scope.row)"
        >报案
        </el-button>
        <el-button
          v-show="scope.row.isRecord=='已报案'"
          size="mini"
          type="text"
          v-hasPermi="['insurance:repordRecord:add']"
          @click="CheckReport(scope.row)"
        >查看报案
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <pagination
      style="background: transparent"
      v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
</div>
</template>
<script>
import {listUser,insureUser,insureUser1,seacond_admin} from "@/api/insurance/user";
import {getExistInsureNoList} from "@/api/insurance/guarantee";
import {get_insure} from "@/api/insurance/approveLog";
export default {
name: "index",
  data(){
  return{
    value:'',
    value1:'',
    // search:'',
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    // 总条数
    total: 0,
    // 查询参数
    queryParams: {
      user_id:'',
      idCardNo: null,//证件号码
      insureId:null,//保单id
      // insure_no:null,//保单号
      name2:null,//被保险人姓名
      company:null,//用工单位
      createTime:null,//报案日期
      insuranceTime:null,//保险时间
      pageSize:10,
      pageNum: 1,
      userId:null,//被保险人id
      role_id:'',
    },
    queryParams2: {
      user_id:'',
      idCardNo: null,
      insureId:null,
      pageSize:10,
      pageNum: 1,
      // insure_no:null,//保单号
      name2:null,//被保险人姓名
      company:null,//用工单位
      createTime:null,//报案日期
      insuranceTime:null,//保险时间

    },
    // 查询保单参数
    queryParams1: {
      pageNum: 1,
      pageSize:10,
      keyWord:"",
      role_id:'',
      user_id:'',
      // insure_no:''
    },
    rules1: {
      insureId:[
        {required: false, message: '请选择或者输入', trigger: 'blur'}
      ],
      idCardNo: [
        {required: false, message: '请输入证件号码', trigger: 'blur'},
        {pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '请输入正确的证件号码'}
      ]
    },
    // 遮罩层
    loading: false,
    // 投保用户表格数据
    userList: [],
    //投保用户选择数据
    userList1:[],
    //投保人数据
    insure:[],
    //工种类型
    TypeworkId: [],
    // 状态 字典
    statusOptions: [],
    queryParams3:{
      user_id:'',
      role_id:'',
    },
    insured:[],//被保险人
  }
  },
  methods:{
    /* 修改表头颜色 */
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #304156;color: #fff;font-weight: 400;font-family: Microsoft YaHei;'
      }
    },

    //选择保单时下拉刷新加载数据
    loadMore(){
      this.queryParams1.pageSize+=10
      // console.log('2342353',this.queryParams1)
      this.getnsureNoList();
    },
    search(e){
      // console.log('34345',e)
      this.queryParams1.keyWord=e;
      this.getnsureNoList();

    },
    search1(e){
      this.queryParams2.idCardNo=e;
      this.getList1();
      // console.log('证件号',e)
    },
    loadMore1(){
      this.queryParams2.pageSize+=10
      // console.log('2342353',this.queryParams1)
      this.getList1();
    },
    //点击搜索按钮搜索数据
    getSearch(queryParams){
      // console.log('queryParams12',this.queryParams);
      // insureUser1(this.queryParams).then(res=>{
      //   console.log('res搜索筛选条件',res)
      // })
      this.$refs[queryParams].validate((valid) => {
        if (valid) {
         this.getList()
        } else {
          return false;
        }
      });
    },
    //重置数据
    getReset(queryParams){
      this.$refs[queryParams].resetFields();
      this.queryParams = {
        user_id:this.queryParams.user_id,
        idCardNo: null,
        insureId: null,
        pageSize:10,
        pageNum: 1,
        name2:null,//被保险人姓名
        company:null,//用工单位
        createTime:null,//报案日期
        insuranceTime:null,//保险时间
        userId:null,//被保险人
      }

          this.queryParams2 = {
            user_id:this.queryParams.user_id,
            idCardNo: null,
            insureId: null,
            pageSize:10,
            pageNum: 1,
            // insure_no:null,//保单号
            name2:null,//被保险人姓名
            company:null,//用工单位
            createTime:null,//报案日期
            insuranceTime:null,//保险时间
          }
      // console.log('queryParams',this.queryParams)
      this.getList();
    },
    //点击保单
    getSelect(item){
     // console.log('e',item)
     this.queryParams = {
       user_id:this.queryParams.user_id,
          idCardNo: null,
          insureId: item.id,
           pageSize:10,
           pageNum: 1,
          name2:null,//被保险人姓名
          company:null,//用工单位
          createTime:null,//报案日期
          insuranceTime:null,//保险时间
          userId:null,//被保险人
        },

         this.queryParams2 = {
           user_id:this.queryParams.user_id,
           idCardNo: null,
           insureId: item.id,
           pageSize:10,
           pageNum: 1,
           // insure_no:null,//保单号
           name2:null,//被保险人姓名
           company:null,//用工单位
           createTime:null,//报案日期
           insuranceTime:null,//保险时间
         },

      this.getList1();
      this.getList();
    },
    getList1(){

      insureUser1(this.queryParams2).then(response=>{
        // console.log('res124',response)
        this.userList1 = response.data.rows;
       // this.total = response.total;
        // this.loading = false;
        // console.log('userList1',this.userList1)

      })
    },
    //查询数据
    getList(){
      this.loading = true;
      insureUser1(this.queryParams).then(response=>{
        this.loading = false;
        // console.log('resww',response)
        this.userList = response.data.rows;
        for (var i=0;i< this.userList.length;i++){
           if (this.userList[i].isRecord){
             this.userList[i].isRecord="已报案"
           }else {
             this.userList[i].isRecord="未报案"
           }
        }
        this.total = response.data.total;


      })
    },
    //点击报案按钮
    handlePolice(row){
      this.$router.push({
        path: '/business/applicationFiling/applicationAdd',
        query:{
          insureUser:row
        }
      })
    },
    //查看报案
    CheckReport(row){
      this.$router.push({
        path:'/example/repordRecord',
        // path: '/business/repordRecord/index',
        query:{
          insureUser:row
        }
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    //工种类别 字典翻译
    typeFormat(row, column){
      return this.selectDictLabel(this.TypeworkId, row.type);
    },
    // 状态 字典翻译
    statusFormat(row, column) {
      // return this.selectDictLabel(this.statusOptions, row.status);
    },
    //查询有保单的数据
    getnsureNoList(){
     // console.log('queryParams1',this.queryParams1)
      get_insure(this.queryParams1).then(res=>{
        // console.log('保单数据res',res)
        this.insure=res.data.list
      })
      // getExistInsureNoList(this.queryParams1).then(res=>{
      //   console.log('保单数据',res)
      // this.insure=res.rows
      //
      // })
    }
  },
  created() {

    this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.queryParams2.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    this.queryParams1.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    var user=JSON.parse(localStorage.getItem('userInfo'));

    this.queryParams3.user_id=user.userId;
    if (user.roles.length!=0){
      this.queryParams3.role_id=user.roles[0].roleId
      this.queryParams.role_id=user.roles[0].roleId
      this.queryParams1.role_id=user.roles[0].roleId
    }
    seacond_admin(this.queryParams3).then(res=>{
      this.insured=res.data;
      // console.log('被保险人数据',res)
    })
    this.getnsureNoList();
    this.getDicts("industry_type").then(response => {
      this.TypeworkId = response.data;
      // console.log('TypeworkId',this.TypeworkId)
    });
    this.getDicts("common_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getList1();
    this.getList();

  }
}
</script>

<style scoped>

</style>
